<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include::header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-body">
					<div id="exampleToolbar" role="group">
						<div shiro:hasPermission="sys:role:add">
							<button type="button"
									class="btn btn-primary" onclick="add()">
								<i class="fa fa-plus" aria-hidden="true"></i>添加
							</button>
						</div>
						<div shiro:hasPermission="sys:role:batchRemove">
							<button type="button" onclick="batchDel()"
									class="btn btn-danger" >
								<i class="fa fa-trash" aria-hidden="true"></i>删除
							</button>
						</div>
					</div>
					<table id="exampleTable" data-mobile-responsive="true">
					</table>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include::footer"></div>
	<script>
		var hasEditBtn = false;
	</script>
	<script>
        var hasDelBtn = false;
	</script>

	<div shiro:hasPermission="sys:role:edit">
		<script>
            hasEditBtn = true;
		</script>
	</div>
	<div shiro:hasPermission="sys:role:remove">
		<script>
            hasDelBtn = true;
		</script>
	</div>


	<script>
		$(function(){
            loadData();
		})
		function loadData(){
             $('#exampleTable').bootstrapTable({
                method : 'get', // 服务器数据的请求方式 get or post
                url : "/sys/role/list", // 服务器数据的加载地址
                striped : true, // 设置为true会有隔行变色效果
                dataType : "json", // 服务器返回的数据类型
                pagination : true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect : false, // 设置为true将禁止多选
                iconSize : 'outline',
                toolbar : '#exampleToolbar',
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize : 10, // 如果设置了分页，每页数据条数
                pageNumber : 1, // 如果设置了分布，首页页码
                search : true, // 是否显示搜索框
                showColumns : true, // 是否显示内容下拉框（选择显示的列）
                sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者
                // "server"
                // queryParams : queryParams,
                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns : [//   // 数据类型，详细参数配置参见文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
					{
					  checkbox:true
					},
					{
					    title:'角色名称',
						field:'roleName'
					},
                    {
                        title:'角色说明',
                        field:'remark'
                    },
					{
					    title:'最后修改时间',
						field:'gmtModified'
					},
					{
					    title:'操作',
						field:'roleId',
						formatter:function(value,item,index){

					        var editBtn =' <button type="button" onclick="edit('+value+')"' +
                                '                        class="btn btn-primary">' +
                                '                                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>修改' +
                                '                                </button>'


					        var delBtn = ' <button type="button" onclick="del('+value+')"' +
                                '                        class="btn btn-danger" >' +
                                '                                <i class="fa fa-trash" aria-hidden="true"></i>删除' +
                                '                                </button>';
					        if(!hasEditBtn){
                                editBtn='';
							}
                            if(!hasDelBtn){
                                delBtn='';
                            }
							return editBtn+delBtn;
						}
					}
                ]
            })
		}

		function del(roleId){
			layer.confirm("是否确认删除该角色?",{btn:["确定","取消"]},function(){
			   $.ajax({
				   url:'/sys/role/del',
				   data:{roleId:roleId},
				   dataType:'json',
				   type:'post',
				   success:function(data){
						if(data.code==200){
							//删除成功
							layer.msg("删除成功",{icon:1});
							//刷新列表
                            $('#exampleTable').bootstrapTable("refresh");
						}else {
						    //提示失败
                            layer.msg("删除失败,"+data.msg,{icon:2});
						}
				   }
			   });
			});
		}
		function batchDel(){
            var rows = $('#exampleTable').bootstrapTable("getSelections");
            var ids = new Array();
            $.each(rows,function(i,item){
                ids.push(item.roleId);
			});
            if(ids.length<=0){
				layer.alert("请选择要删除的数据");
				return;
			}
			layer.confirm("你确定要删除所选择的角色吗?",{btn:["确定","取消"]},function(){
				$.ajax({
					url:'/sys/role/batchDel',
					data:{ids:ids},//ids[]
					dataType:'json',
                    traditional: true,
					type:'post',
					success:function(data){
						if(data.code==200){
						    //删除成功
							layer.msg("删除成功",{icon:1});
						}else {
						    //删除失败
                            layer.msg("删除失败",{icon:2});
						}
					}
				});
			})

		}
		function add(){
		    layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/sys/role/add'
			});
		}

		function edit(roleId){
            layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/sys/role/edit/'+roleId
            });
		}

		function reload() {
            $('#exampleTable').bootstrapTable("refresh");
        }
	</script>
</body>

</html>